<template>
  <div>
    <!-- 角色列表展示 -->

    <a-table
      :columns="roleData.columns"
      :data-source="roleData.data"
      :pagination="false"
    >
   
      <template  #action="{ record }">
         <a-button type="primary" @click="editRole.editRolefn(record)">编辑角色</a-button>
         <a-button type="primary" @click="editRole.deleteRolefn(record)" danger>删除角色</a-button>
      </template>
    </a-table>


    <!--        编辑角色对话框-->
    <a-modal
      v-model:visible="editRole.visible"
      title="编辑角色"
      :confirm-loading="editRole.confirmLoading"
      @ok="editRole.handleOk"
    >
   <p>角色名:</p>
   <a-input v-model:value="editRole.roleName" placeholder="Role Name" />
   <p>角色描述:</p>
  <a-input v-model:value="editRole.roleDescription" placeholder="Role Description" />

   <p>角色路由菜单:</p>
 
     <a-tree
    checkable
    :tree-data="roleTree.treeData"
    v-model:checkedKeys="editRole.roleTreeData"
    :replace-fields="roleTree.replaceFields"
  />

  <p>状态:</p>
    <a-switch checked-children="开" un-checked-children="关" v-model:checked="editRole.status" />
    </a-modal>
  </div>
</template>

<script>
import { ref, reactive, watch, getCurrentInstance, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  name: "roleManager.vue",
  props: {
    roleData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  emits:{
    'updateRoleData':null
  },
  components:{
      
  },
 async setup(props,{emit}) {
    var { proxy } = getCurrentInstance();
    var roleData = props.roleData; //表格数据
   
   const store =useStore()

    //获取所有的菜单路由树形结构数据
      var tree =await proxy.$request({
        url:'/menu/list',
        method:'get',
        params:{
        }
    })
      tree = tree.data.data.tree     
      store.commit('setTreeData',tree)
    var roleTree = reactive({
      treeData:store.state.treeData,
      replaceFields:{
      title: 'menu_name',
      key:'menu_id',
      children:'child'
    }
    })
    
    var editRole = reactive({
      visible: false,
      confirmLoading: false,
      roleName: "",
      roleId:'',
      roleDescription:"",
      status:true,
      roleTreeData:[], //当前编辑角色的菜单id
      filterRoleTreeData:(childNodeList)=>{
        editRole.roleTreeData=[]
        var treeData=store.state.treeData
        var fatherNodeList=[]
        function findFaterNode(arr){
          arr.forEach(el => {
              if(el.child){
                fatherNodeList.push(el.menu_id)
                findFaterNode(el.child)
              }
          });
        }
        findFaterNode(treeData)
        childNodeList.forEach(el=>{
          if(!fatherNodeList.includes(el)){
            editRole.roleTreeData.push(el)
          }
        })
      },
      editRolefn:(role)=>{
          editRole.filterRoleTreeData(role.menu_ids)
         editRole.roleName=role.role_name
         editRole.roleId=role.role_id
         editRole.roleDescription=role.role_desc 
   
          role.status==1?editRole.status=true:editRole.status=false
          editRole.visible=true
      },
     deleteRolefn:(role)=>{     
        proxy.$request({
          url:'/role_admin/del',
          method:"post",
          data:{
            id:role.role_id
          }
        }).then(res=>{
            emit('updateRoleData','更新表格')
        })
     },
     compeletRoleTreeData:()=>{ //提交时再获取完整的节点数据
        var treeData=store.state.treeData
        var fatherMenuIdList=[]
        function findFaterData(arr){
          arr.forEach(el => {
              if(el.child){
                  var hasSonId=false
                  var son_menuIdList=[]
                  el.child.forEach(son=>{
                      son_menuIdList.push(parseInt(son.menu_id))
                  })
                 editRole.roleTreeData.forEach((menu_id)=>{
                   if(son_menuIdList.includes(parseInt(menu_id))){
                     hasSonId=true
                   }
                 })
                 if(hasSonId){
                     fatherMenuIdList.push(parseInt(el.menu_id))
                 }
                findFaterData(el.child)
              }
          });
        }
        findFaterData(treeData)
        editRole.roleTreeData.push(...fatherMenuIdList)
     },
      handleOk: () => {
        editRole.compeletRoleTreeData()
        console.log(editRole.roleTreeData)
          proxy.$request({
            url:'/role_admin/create',
            method:'post',
            data:{
              role_id:editRole.roleId,
              role_name:editRole.roleName,
              role_desc:editRole.roleDescription,
              menu_ids:editRole.roleTreeData.join(','),
              status:editRole.status
            }
          }).then(res=>{
            console.log(res)
          },err=>{

          }).finally(()=>{
              store.dispatch('user/getNavTreeData')
             emit('updateRoleData','更新表格')
            editRole.visible = false
             editRole.confirmLoading = false
          })

     
      },
    });

   
    watch(()=>editRole.roleTreeData, () => {
      console.log('roleTreeData',editRole.roleTreeData);
    });
 
   
    return {
      editRole,
      roleData,
      roleTree
    };
  },
};
</script>


<style>
</style>